'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';


import {connect} from 'react-redux';
import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";
import Color from "../../../../core/constant/color";
import {userActions} from '../../../../actions/index'

class SkillDetailScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        this.fetchSkillDetailInfo();
    }

    /**
     * 从服务器刷新技能资质
     */
    fetchSkillDetailInfo(){
        const {dispatch} = this.props;
        const {skillInfo} = this.props.navigation.state.params;

        console.log(skillInfo, "------->skillInfo");
        if (skillInfo && skillInfo.hasOwnProperty('id')) {
            dispatch(userActions.getSkillDetail(skillInfo.id))
        }
    }

    getSkillDetailInfo() {
        const {skillInfo} = this.props.navigation.state.params;
        const {userSkillDetails} = this.props;
        let detailSkillInfo = null;
        if (skillInfo && skillInfo.hasOwnProperty('id')) {
            detailSkillInfo = userSkillDetails[skillInfo.id];
        }
        return detailSkillInfo;
    }


    genGenderUI(gender) {
        if (gender) {
            const genderUrl = gender == "1" ? require('../../../../img/gender_boy.png') : require('../../../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genUserSkillDetailPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.bigImagePanel}>
                    {skillDetailInfo.hasOwnProperty('zizhitu_url') &&
                    <Image source={{uri: Util.substrImageUrl(skillDetailInfo.zizhitu_url)}} style={styles.bigImage}/>}
                    <View style={styles.userDetailPanel}>
                        <View style={styles.userDetailTop}>
                            <Text style={styles.userSkillName}>{skillDetailInfo.skill_name}</Text>
                            <View style={styles.skillPricePanel}>
                                <Text style={styles.skillPriceType}>¥</Text>
                                <Text style={styles.skillPrice}>{skillDetailInfo.price}元/{skillDetailInfo.unit}</Text>
                            </View>
                        </View>
                        <View style={styles.splitLine}/>
                        <View style={styles.userDetailBottom}>
                            {skillDetailInfo.systemDesc && <Text style={styles.userDetailShortDesc}>{skillDetailInfo.systemDesc}</Text>}
                            <View style={styles.rowInfo}>
                                <Text style={styles.userOrderNumberDesc}>接单{skillDetailInfo.orderNumber}次</Text>
                                <View style={styles.userCridetLevelPanel}>
                                {this.genStarUI("user-skill-detail",parseInt(skillDetailInfo.xinyong))}
                                <Text style={styles.userCridetLevelDesc}>{Util.formatNumber(skillDetailInfo.xinyong,1)}</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

            );
        }

    }

    onPressFocus(skillDetailInfo){
        const {dispatch} = this.props
        const {isAttention} = skillDetailInfo;


        dispatch(userActions.focus(skillDetailInfo.person_id,!isAttention)).then(()=>{
            //刷新技能列表
            this.fetchSkillDetailInfo();
        })
    }


    genFocusButtonUI(){
        const skillDetailInfo = this.getSkillDetailInfo();
        if(skillDetailInfo){
            const {isAttention} = skillDetailInfo;
            return (
                <IconButton style={isAttention?styles.btnFocus:styles.btnUnFocus} textStyle={isAttention?styles.btnFocusText:styles.btnUnFocusText} title={isAttention?"已关注":"关注"} onPress={this.onPressFocus.bind(this,skillDetailInfo)}/>
            );
        }
    }

    onPressJumpToPersonInfo=()=>{
        const {navigate} = this.props.navigation;
        const {skillInfo} = this.props.navigation.state.params;
        //跳转到搜索列表
        navigate('PersonInfoScreen', {
            title: "个人资料",
            skillInfo: skillInfo,
        })
    }

    genUserInfoDetailPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.userInfoDetailPanel}>
                    <TouchableOpacity onPress={this.onPressJumpToPersonInfo}>
                    <View style={styles.userTinyInfoPanel}>
                        {skillDetailInfo.hasOwnProperty('touxaing_url') &&
                        <Image source={{uri: Util.substrImageUrl(skillDetailInfo.touxaing_url)}}
                               style={styles.userHeadImage}/>}
                        <View style={styles.userTinyInfoMid}>
                            <View style={styles.userTinyInfoMidTop}>
                                <Text style={styles.userNickName}>{skillDetailInfo.nick_name} </Text>
                            </View>
                            <View style={styles.userTinyInfoMidBottom}>
                                <View style={styles.userGenderGroup}>
                                    {this.genGenderUI(skillDetailInfo.gender)}
                                    <Text style={styles.age}>{skillDetailInfo.age}</Text>
                                </View>
                                <Text style={styles.lastTime}>{skillDetailInfo.times}</Text>
                            </View>
                        </View>
                        <View style={styles.userTinyInfoRight}>
                            {this.genFocusButtonUI()}
                        </View>
                    </View>
                    </TouchableOpacity>
                    {skillDetailInfo.skillDesc && <View style={styles.userDetailPanel}>
                        <View style={styles.userDetailBottom}>
                            <Text style={styles.userSkillDesc}>{skillDetailInfo.skillDesc}</Text>
                        </View>
                    </View>}
                </View>
            );
        }
    }

    genStarUI(key,startCount){
        let starUI = [];
        for(let i=0;i<startCount;i++){
            starUI.push(<Image key={`star-item-${key}-${i}`} source={require('../../../../img/icon_star.png')} style={styles.iconStar}/>)
        }
        return (<View style={styles.iconStarPanel}>
            {starUI}
        </View>);
    }

    genUserCommentItemUI(evaluateInfo,index){
        return (
            <View style={styles.userCommentItem} key={`user-comment-item-${index}`}>
               <View style={styles.commentItemHead}>
                   {evaluateInfo.touxiang_url && <Image source={{uri: Util.substrImageUrl(evaluateInfo.touxiang_url)}} style={styles.commentItemHeadImage}/>}
                   <Text style={styles.commentItemUserNickName}>{ evaluateInfo.hasOwnProperty('nick_name') ? evaluateInfo.nick_name :'匿名'}</Text>
                   <Text style={styles.commentItemTime}>{evaluateInfo.evaluateDate}</Text>
               </View>
                <View style={styles.commentItemBody}>
                    {this.genStarUI("user-comment",evaluateInfo.evaluateScore)}
                    <Text style={styles.commentItemText}>{evaluateInfo.evaluateComment}</Text>
                </View>

            </View>
        );
    }

    genUserCommentPanelUI(){
        const skillDetailInfo = this.getSkillDetailInfo();

        console.log(skillDetailInfo,"----->userCommentPanelUI--->skillDetailInfo");
        if(skillDetailInfo){
            return (
                <WinPanel title={`评论(${skillDetailInfo.evaluateNumber}次)`}>
                    {skillDetailInfo.evaluateTop3 && skillDetailInfo.evaluateTop3.length>0 && skillDetailInfo.evaluateTop3.map((evaluateInfo,index)=>this.genUserCommentItemUI(evaluateInfo,index))}
                </WinPanel>
            );
        }

    }

    onPressOrder=()=>{
        const {navigate} = this.props.navigation;
        const {skillInfo} = this.props.navigation.state.params;
        //跳转到搜索列表
        navigate('OrderScene', {
            title: "下单",
            skillInfo: skillInfo,
        })
    }

    render() {

        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genUserSkillDetailPanelUI()}
                    {this.genUserInfoDetailPanelUI()}
                    {this.genUserCommentPanelUI()}
                </ScrollView>
                <View style={styles.bottomBar}>
                    <IconButton style={styles.btnChart} textStyle={styles.btnChartText} title="聊天"/>
                    <IconButton style={styles.btnOrder} title="下单" onPress={this.onPressOrder}/>
                </View>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {},
    bigImagePanel: {
        backgroundColor:Color.PRIMARY_COLOR,
    },
    bigImage: {
        height: 325,
        resizeMode: 'contain',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },


    userDetailPanel: {
        backgroundColor: 'white',
        borderTopWidth: Util.getRealPixel(1),
        borderTopColor: '#EDEDEF',
    },
    userDetailTop: {
        padding: 8,
        flexDirection: 'row',
        alignItems: 'center',
        // borderWidth:1,
    },
    userSkillName: {
        fontSize: 16,
    },
    userNickName: {
        fontSize: 14,
    },
    userSkillDesc:{
        fontSize: 14,
        color: '#707070',
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        height: 14,
        width: 30,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginTop: 2,
        marginBottom: 2,

    },
    age: {
        color: '#FF0055',
        fontSize: 12,
        backgroundColor:'transparent',
    },
    genderIcon: {
        width: 10,
        height: 10,
    },
    rightActivePanel: {
        flex: 1,
        alignItems: 'flex-end',

    },
    btnActiveTime: {
        width: 78,
        height: 30,
        backgroundColor: '#FF0055',
    },
    btnActiveTimeText: {
        color: 'white',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        marginLeft: 8,
    },
    userDetailBottom: {
        padding: 8,
    },
    userDetailShortDesc: {
        color: '#707070',
        fontSize: 14,
        paddingBottom: 8,
    },
    userOrderNumberDesc: {
        color: '#707070',
        fontSize: 14,
        flex: 1,
    },
    userCridetLevelPanel:{
        flexDirection:'row',
        flex:1,
        alignItems:'center',
        justifyContent:'flex-end',
    },
    userCridetLevelDesc: {
        color: '#707070',
        fontSize: 14,
        textAlign: 'right',
        marginLeft:4,
    },
    gridViewGrop: {
        justifyContent: 'space-between',
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },

    rowInfo: {
        flexDirection: 'row',
    },

    skillPricePanel: {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
    skillPriceType: {
        fontSize: 14,
        color: '#FF6262',
    },
    skillPrice: {
        fontSize: 16,
        color: '#FF6262',
    },

    userInfoDetailPanel: {
        marginTop: 8,
    },
    //用户信息面板
    userTinyInfoPanel: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        padding: 8,
    },
    userHeadImage: {
        width: 40,
        height: 40,
        borderRadius: 6,
    },
    userTinyInfoMid: {
        marginLeft: 8,
    },
    userTinyInfoMidTop:{
        flexDirection: 'row',
        alignItems: 'center',
    },
    userTinyInfoMidBottom: {
        flexDirection: 'row',
        marginTop: 4,
        alignItems: 'center',
    },
    userTinyInfoRight: {
        flex:1,
        alignItems:'flex-end',
        justifyContent:'center',

    },

    lastTime: {
        color: '#707070',
        fontSize: 12,
        marginLeft: 4,
    },

    userCommentPanel:{
        alignItems: 'center',
        backgroundColor: 'white',
    },
    userCommentItem:{

    },
    iconStarPanel:{
      flexDirection:'row',
    },
    iconStar:{
        width:14,
        height:14,
    },
    commentItemHead:{
        flexDirection:'row',
        alignItems:'center',
        padding:8,
    },
    commentItemHeadImage:{
        width:28,
        height:28,
        marginRight:8,
        borderRadius:14,
        resizeMode:'cover',
        backgroundColor:'gray',
    },
    commentItemUserNickName:{
        color: '#707070',
        fontSize: 14,
        flex:1,
    },
    commentItemTime:{
        color: '#707070',
        fontSize: 14,
    },
    commentItemBody:{
        padding:8,
    },
    commentItemText:{
        color: '#272727',
        fontSize: 14,
        marginTop:8,
    },
    btnFocus:{

    },
    btnUnFocus:{
        backgroundColor:'white',
        borderWidth:1,
        borderColor:'#1D9AFF',
    },
    btnFocusText:{

    },
    btnUnFocusText:{
        color:'#1D9AFF',
    },
    bottomBar:{
        height:54,
        borderTopWidth:Util.getRealPixel(1),
        borderTopColor:'#EDEDEF',
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',

    },
    btnChart:{
        width:120,
        marginLeft:8,
        marginRight:8,
        height:36,
        borderWidth:1,
        borderColor:Color.BTN_BGCOLOR,
        backgroundColor:'white',
    },
    btnChartText:{
        color:Color.TEXT_BTN,
    },
    btnOrder:{
        flex:1,
        height:36,
        marginRight:8,
        borderWidth:1,
        borderColor:Color.BTN_BGCOLOR,
        backgroundColor:Color.BTN_BGCOLOR,
    },
});

export default connect((state, props) => {
    console.log('--------->searchService', state)
    return ({
        userSkillDetails: state.user.userSkillDetails,
    });
})(SkillDetailScene);